<template>
  <view class="contain" :style="{'height':boxheight+'px','background-image':'url('+background+')'}">
        <view class="pages">{{page}}/{{totalpage}}</view>
        <view class="shopbox">
            <view class="shoplistth">
                <view class="th">房间({{shops}})</view>
                <view class="th">场控</view>
                <view class="th">剧本</view>
                <view class="th">开始时间</view>
                <view class="th">预计结束</view>
            </view>
            <view v-for="(item,index) in shoplist" :key="index" class="shoplist">
                <view class="td">
                    {{item.room}}
                </view>
                <view class="td dm">
                    <view class="pictext">
                        <view class="avaurl" :style="{'background-image':'url('+item.avaurl+')'}">
                            <view class="xingji">
                                <view v-for="(itm,inx) in item.xingji" :key="inx" class="star">
                                    ★
                                </view>
                            </view>
                        </view>
                        <view class="pa">
                            <view class="nickname">
                                <text>{{item.nickname}}</text>
                                <text style="color:#ff29c0;font-weight:bolder" v-if="item.gender==2">♀</text>
                                <text style="color:#5dcdFA;font-weight:bolder" v-else>♂</text>
                            </view>
                            <text class="golddm" v-if="item.titlename">{{item.titlename}}</text>
                        </view>
                    </view>
                </view>
                <view class="td">
                    <view class="pictext">
                        <!-- <img :src="item.img" class="aimg" /> -->
                        <view style="text-align:center;">{{item.title}}</view>
                    </view>
                </view>
                <view class="td formatdate">
                    {{item.created}}
                </view>
                <view class="td formatdate">
                    {{item.endtime}}
                </view>
            </view>
        </view>
        <!-- <dmdialog ref="viewDm" v-if="visiable" :shopid="shopid" :pptv="pptv"></dmdialog> -->
        <view class="freelist">
            <view class="roomli">
                <text class="room" style="margin-left: 10px;">空闲房间({{freelength}}):</text>
                <text v-for="(v,k) in freelist" :key="k" class="room">
                    {{v}}
                </text>
            </view>
        </view>
    </view>
</template>

<script>
  // import dmdialog from '@/components/dmDialog'
	export default {
	    // components: {
	    //     dmdialog
	    // },
          props: {
              shopid: 0,
              pptv: 0
          },
	    data() {
	        return {
	            shoplist: [],
	            freelist: [],
	            freelength: 0,
	            page: 1,
	            limit: 6,
	            totalpage: 0,
	            shops: 0,
	            boxheight: 370,
	            pptvv: 0,
	            background: '',
	            dms: 0,
	            visiable: false,
	        }
	    },

		onLoad() {
    
		},
        mounted() {
          this.setboxheight()
          this.getList()
        },
            destroyed() {
               clearTimeout(this.timer)
            },
		methods: {
     setboxheight () {
           this.pptvv = this.pptv
           // eslint-disable-next-line eqeqeq
           if (this.pptvv == 1) {
              this.boxheight = 530
           } else {
              this.boxheight = 370
           }
         },
         getList() {
           this.$http({
               url: `/bigscreen/shoproom1`,
               data: {
                   pptv: this.pptv,
                   shop: this.shopid,
                   page: this.page
               },
               method: 'post'
           }).then(response => {
               this.totalpage = response.totalpage
               this.shoplist = response.busylist
               this.shops = response.count
               this.freelist = response.freelist
               this.freelength = Object.values(this.freelist).length
               this.background = response.background
               this.$emit('func', 20000);

           }).catch(error => {
              console.log(error)
           })
         },
         timer() {
           return setTimeout(() => {
               this.page++
               if (this.page > this.totalpage) {
                   this.page = 1
               }
               this.getList()
           }, 10000)
         },
         opendm() {
           this.visiable = !this.visiable
         }
		},
        watch: {
            pptv(newVal,oldVal) {
                this.setboxheight()
            }
        },
	}
</script>

<style lang="less">
.contain{
    position: relative;
    height: 370px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background-size: 100% 100%;
    .shopbox{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .shoplistth{
            width: 100%;
            height: 50px;
            border-bottom:1px solid #444;

            display: flex;
            justify-content: space-between;
            background-color: rgba(23,53,73,.5);

            .th{
                flex:1;
                text-align: center;
                height: 50px;
                line-height: 50px;
            }
        }
        .shoplist{
            flex: 1;
            width: 100%;
            border-bottom:1px solid #444;
            display: flex;
            justify-content: space-between;

            .td{
                flex:1;
                min-height: 63px;
                display:flex;
                justify-content: center;
                align-items:center;
                .pictext{
                    display:flex;
                    justify-content: center;
                    align-items:stretch;
                    .avaurl{
                        margin: 2px 0;
                        width: 45px;
                        height: 45px;
                        background-position: center;
                        background-size: 100% auto;
                        background-repeat: no-repeat;
                        background-color: #000;
                        position: relative;
                        .xingji{
                            position: absolute;
                            width: 100%;
                            top:-14px;
                            left: 0;
                            display: flex;
                            justify-content: center;
                            .star{
                                color: #eebf2f;
                                font-size: 14px;
                                text-shadow: 0 0 2px #000;
                            }
                        }
                    }
                    .pa{
                        margin-left: 4px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .nickname{
                            font-size:14px;
                            white-space:nowrap;
                        }
                        .aimg{
                            height: 70px;
                        }
                        .golddm{
                            background-color:#eebf2f;
                            background-image: linear-gradient(to right,#eebf2f, #feb,#eebf2f);
                            color:#000;
                            padding:2px 4px;
                            font-size:12px;
                            border-radius:4px;
                            white-space: nowrap;
                        }
                    }
                }
            }
            .dm {
                justify-content: flex-start;
            }
            .formatdate{
                font-size: 14px;
            }
        }
    }
    .freelist{
        background-color:teal;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .roomli{
            display: flex;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .room{
                margin: 0 3px;
                // padding: 5px ;
                // background-color:rgba(255, 255, 255, .5);
                // border-radius: 4px;
                color: #fff;
                font-size: 12px;
            }
        }
        .freedm{
            background-color: #136;
            font-size: 12px;
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
            cursor: pointer;
        }
    }
    .pages{
        position: absolute;
        left: 3px;
        bottom: 33px;
        background: rgba(255,255,255,.5);
        color: #000;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        font-size: 12px;
    }
}
</style>
